import React, { Component } from 'react'
import PropTypes from 'prop-types';
export class Main extends Component {
   constructor(props) {
     super(props)
     this.state = {
        val:''
     }
   }
   changeValue=(e)=>{
  
       this.setState({
           val:e.target.value
       })
   }
 
  render() {
      const {list,add,del,changestate,color}=this.props
      const {val}=this.state
    return (
      <div className='main'>
          <div className="add">
                <input type="text" value={val} onChange={this.changeValue} />
                <button 
                onClick={
                    ()=>{
                        add(val)
                        this.setState({//清空     
                                val:''
                        })

                    }
                }>增加</button> 
               
          </div>
        
          <ul className='todoList'>
            {
                list.map((item,index)=>{
                    return <li key={item.id}>
                        <input type="checkbox" 
                        onChange={
                            ()=>{
                                changestate(item.id)
                            }
                        } />
                        <b>{item.title} </b>
                        {item.state ?
                       <button style={{background:color}}>已完成</button>
                      :<button>未完成</button>}
                      <span onClick={()=>{
                          del(item.id)
                      }}> x</span> </li>
                })
            }
          </ul>
      </div>
    )
  }
}
Main.propTypes = {
    list:PropTypes.array,
    add:PropTypes.func.isRequired,
   del: PropTypes.func.isRequired,
   changestate:PropTypes.func.isRequired
  };
  Main.defaultProps = {
      list:[],
    color: 'yellow'
  };
  
export default Main